<template>
	<view>
		<view class="header">
			<view class="header-main">
				<image :src="imgurl+'background.png'"></image>
				<view class="title">{{title}}</view>
				<view class="usercss">
					<span>用户ID:</span>
					<text>{{nameid}}</text>
				</view>
				<view class="position" @tap="lookQues">查看问卷</view>
			</view>
		</view>
		<view class="main">
			<view class="main-title">分享</view>
			<view class="main-item flex">
				<button class="buttoncss" open-type="share">分享给微信好友</button>
				<image class="otherimg" :src="imgurl+'zhuanfa.png'"></image>
			</view>
			<view v-if="wxpid != 2" class="main-item flex" @tap="sharePic">
				<image :src="imgurl+'erweima.png'"></image>
				<text>生成二维码海报</text>
			</view>
			<view v-if="wxpid != 2" class="main-item flex other">
				<view class="left flex">
					<image :src="imgurl+'lianjie.png'"></image>
					<input :value="sharUrl + '?wenid=' + wenid" />
				</view>
				<view class="right" @tap="copyPath">复制网页链接</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js";
	import app from "../../App.vue"
	export default {
		data() {
			return {
				title: '',
				imgurl: '',
				wenid: '',
				nameid: '',
				wxpid: '',
				sharUrl: 'https://wenba.online/'
			};
		},
		methods: {
			sharePic() {
				uni.navigateTo({
					url: '../sharePic/sharePic?wenid=' + this.wenid + '&url=' + this.sharUrl + "&title=" + this.title
				})
			},
			copyPath() {
				uni.setClipboardData({
					data: this.sharUrl + '?wenid=' + this.wenid,
					success: (res) => {
						uni.showToast({
							icon: 'success',
							title: '复制成功',
							duration: 1500
						})
						api.look({
							wenid: this.wenid,
							url: this.sharUrl + '?wenid=' + this.wenid,
							api: 'wenurl'
						}).then(res => {
							if(res.code == 200) {
								console.log(res)
							}
						}).catch(err => {
							console.log(err)
						})
					}
				})
			},
			lookQues() {
				uni.navigateTo({
					url: "../lookQues/lookQues?wenid=" + this.wenid
				})
			},
			getWenJ(wenid) {
				api.look({
					api: 'wenfind',
					shu: '1',
					table: '3',
					wenid: wenid,
				}).then(res => {
					if(res && res.code == 200) {
						this.title = res.date[0].namewenid
					}
				}).catch(err => {
					console.log(err)
				})
			},
		},
		onShareAppMessage() {
			return {
				title: this.title ? this.title : '',        // 默认是小程序的名称(可以写slogan等)
				path: '/pages/questionHallDetial/questionHallDetial?wenid=' + this.wenid,        // 默认是当前页面，必须是以‘/’开头的完整路径
				// imageUrl:this.paper.image_url,// 分享封面图片
				success: (res) => { // 分享成功回调
					// this.$uniApi.showTips('分享成功','success')
					api.share({
						api: 'share',
						id: this.nameid ? this.nameid : uni.getStorageSync('message')[0].id,
						wenid: this.wenid
					}).then(res => {
						console.log(res)
					}).catch(err => {
						console.log(err)
					})
				}
			}
		},
		onLoad(options) {
			if(options.wenid && options.wxpid) {
				this.wxpid = options.wxpid
				this.wenid = options.wenid
				this.getWenJ(this.wenid)
			}
			this.imgurl = app.globalData.imgurl;
			this.nameid = uni.getStorageSync('message')[0].id
		}
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
		font-weight: 500;
	}

	.header {
		width: 100%;
		height: 260rpx;
		background: #209FFC;
		position: relative;

		.header-main {
			width: 690rpx;
			height: 300rpx;
			background: #fff;
			box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(168, 217, 253, 1);
			border-radius: 10rpx;
			position: absolute;
			top: 50rpx;
			left: 30rpx;

			image {
				position: absolute;
				top: 0;
				right: 0;
				width: 690rpx;
				min-height: 300rpx;
			}

			.title {
				padding: 0 20rpx;
				box-sizing: border-box;
				color: #333;
				font-size: 34rpx;
				margin: 20rpx 0;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.usercss {
				color: #999;
				font-size: 24rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
			}

			.position {
				width: 140rpx;
				height: 60rpx;
				border-radius: 20rpx;
				line-height: 60rpx;
				text-align: center;
				position: absolute;
				bottom: 10%;
				left: 5%;
				color: #209FFC;
				border: 1rpx solid #209FFC;
				font-size: 30rpx;
			}
		}
	}

	.main {
		width: 690rpx;
		margin: 130rpx auto 0;

		.main-title {
			color: #999;
			font-size: 36rpx;
			line-height: 50rpx;
		}

		.main-item {
			background: #fff;
			border-radius: 10rpx;
			height: 100rpx;
			margin: 20rpx 0;
			padding-left: 15rpx;
			box-sizing: border-box;
			position: relative;

			.buttoncss {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				position: absolute;
				top: 0;
				left: 0;
				background: #fff;
				text-align: left;
				padding-left: 80rpx;
			}

			.otherimg {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
			}

			image {
				width: 60rpx;
				height: 60rpx;

			}

			input {
				width: 400rpx;
			}
		}
	}

	.other {
		justify-content: space-between;
	}

	.right {
		min-width: 140rpx;
		height: 60rpx;
		border-radius: 20rpx;
		line-height: 60rpx;
		text-align: center;
		color: #209FFC;
		border: 1rpx solid #209FFC;
		font-size: 30rpx;
		margin-right: 30rpx;
	}

	button::after {
		border: none;
	}
</style>
